import {
  Directive,
  Input
} from '@angular/core';

@Directive({
  selector: '[appPasswordVisible]',
  host: {
    '(click)': 'toggle()',
    '[class.password-visible]': 'inputType!==passwordType',
    '[class.password-hidden]': 'inputType===passwordType',
  },
})
export class PasswordVisibleDirective {

  private inputType:string;
  private toggleType:string = 'text';
  private passwordType:string = 'password';

  @Input() appPasswordVisible:HTMLInputElement;

  constructor() {
  }

  ngOnInit () {
    let type = this.appPasswordVisible.type;
    if (type !== this.passwordType) {
      this.toggleType = type;
    }
    this.inputType = this.appPasswordVisible.type;
  }

  toggle () {
    this.inputType = [this.passwordType, this.toggleType][+(this.inputType === this.passwordType)];
    this.appPasswordVisible.type = this.inputType;
  }

}
